{extend name="layout/iframe" /}

{block name="content"}
<div class="row js-check-wrap" style="margin: 0;">
    <div class="col-lg-12">
        <div class="portlet light">
            <div class="box-header">
                <div class="row">
                    <div class="col-md-10">
                        <form id="searchForm" action="{$pageSize.url}" class="form" method="post">
                            <div class="form-inline">
                                <select id="typeId" name="typeId" class="form-control">
                                    <option value="">全部类型</option>
                                    {foreach name="typeList" item="type" key="typekey"}
                                    <option value="{$typekey}">{$type}</option>
                                    {/foreach}
                                </select>
                                <input type="text" class="form-control" name="name" value="" placeholder="名称">
                                &nbsp;&nbsp;&nbsp;
                                <button id="doSearch" type="button" class="btn btn-success" title="筛选">
                                    <i class="fa fa-search"></i> 筛选
                                </button>
                                <!--<a href="{$currentUrl}?reset=1" class="btn btn-danger"><i class="fa fa-trash"></i> 清空</a>-->
                                <button type="reset" class="btn btn-danger" title="清空">
                                    <i class="fa fa-trash"></i> 清空
                                </button>
                            </div>
                        </form>
                    </div>
                    <div class="col-md-2">

                    </div>
                </div>
            </div>
            <div class="portlet-body">
                <form class="js-ajax-form" method="post">
                    <div class="">
                        <table id="data-table" class="table table-bordered table-hover dataTable">
                            <thead>
                                <th>主体名称</th>
                                <th>主体类型</th>
                                <th>操作</th>
                            </thead>
                        </table>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<input type="hidden" class="villageId" value="{$param.villageId}">
<input type="hidden" class="datalist_url" value="{:url('admin/'.strtolower($model).'/manageList')}">
{/block}

{block name="pagescript"}
<script src="__STATIC__/admin/pages/js/searcharea.js" type="text/javascript"></script>
<script>
    var datalist_url = $('.datalist_url').val();


    var initTable = function() {
        var villageId = $('.villageId').val();
        var param = {
            'villageId':villageId
        };

        var table = $('#data-table');

        if(table.length > 0){
            table.dataTable({
                "processing": true,
                "ordering": false, // 禁止排序
                serverSide: true,// 开启服务器模式
                "ajax": {
                    url: datalist_url,
                    data: param
                },
                "autoWidth": false,
                "columns": [
                    {"data": "name"},
                    {"data": "typeId"},
                    {
                        "data": "null",
                        "render": function(data, type, row, meta) {
                            var html = '<button type="button" class="btn btn-success select-btn">选取</button>';

                            return html;
                        }
                    }
                ],
                "language": {
                    url: '/public/static/admin/pages/datatable_cn.json'
                },
                "lengthMenu": [[10, 20, 50, 100, 150], [10, 20, 50, 100, 150]],
                "pageLength": 10,
                "scrollX":"",
                "destroy": false,
                "stateSave": true,
                //"stateSave": false,
                "stateSaveParams": function (settings, data) {
                    var search = data.search.search;
                    //console.log(data);
                    if(search){
                        var arr = $.parseJSON(search);
                        for(var key in arr){
                            $("#searchForm input[name='"+key+"']").val(arr[key]);
                            $("#searchForm select[name='"+key+"']").val(arr[key]);
                        }
                    }
                },
                "dom": "<'row'<'.col-md-6 col-sm-12'><'col-md-6 col-sm-12'>r>" +
                "<t>" +
                "<'relative'<'col-md-5'i><'col-md-7'>lp>",
                "fnCreatedRow": function(nRow, aData, iDataIndex){
                    // 标识已选中数据
                    var currentId = $(parent.document).find('.manageId').val();
                    if(currentId == aData['id']) {
                        $(nRow).find('.select-btn').prop('disabled', true);
                        $(nRow).find('.select-btn').attr('style', 'background:#5cb85c');
                    }
                },
                "fnInitComplete": function() {
                    //var nTrs = table.fnGetNodes();//fnGetNodes获取表格所有行，nTrs[i]表示第i行tr对象
                    var city = $('input[name=city]').val();
                    if(city){
                        //$("#city").find("option:contains('"+city+"')").attr("selected", true);
                        get_xian($("#city"));
                    }
                }
            });
        }

        // 筛选
        $('#doSearch').on('click', function(event){
            var param = $('#searchForm').serializeObject();

            tableSearch(table, param);
        });

        // 选取
        table.on('click', '.select-btn', function(event) {
            // 操作行对象
            var dataArr = table.DataTable().rows($(this).parents("tr")).data();
            var id = dataArr[0].id;
            var name = dataArr[0].name;

            $(parent.document).find('.manageId').val(id);
            $(parent.document).find('.select-manage').text(name);

            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        });
    };

    var tableSearch = function(table, params) {

        table.DataTable().search(JSON.stringify(params)).draw();
    };

    $(function() {
        initTable();
    });
</script>
{/block}